<template>
	<page-meta :page-style="gradientStyle"></page-meta>
	<view class="page-container">
		<view class="page-body">
			<view class="tab-box">
				<view class="tab-list" :style="{transform: 'translateX('+offset+'px);'}">
					<block v-for="(item, index) in 10" :key="index">
						<view class="tab-item" :id="'item-'+index" @click="changeTab(index)">{{item+1}}</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offset: (uni.getSystemInfoSync().windowWidth / 2) - 25,
				currentIndex: 0
			};
		},
		computed: {
			gradientStyle() {
				return `background: linear-gradient(360deg, #23b5bd 0%, #87cb28 100%);`
			}
		},
		methods: {
			changeTab(index) {
				const initTabOffset = (uni.getSystemInfoSync().windowWidth / 2) - 25; // 偏移量基数
				const query = uni.createSelectorQuery();
				query.select('#item-'+index).boundingClientRect(res => {
					if(index > this.currentIndex) {
						this.offset = this.offset - (res.left - initTabOffset);
					}
					if(index < this.currentIndex) {
						this.offset = this.offset + (initTabOffset - res.left);
					}
					this.currentIndex = index;
				}).exec();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		.page-body {
			.tab-box {
				display: flex;
				margin-top: 400rpx;
				.tab-list {
					display: flex;
					transition: all 0.5s ease-out;
					.tab-item {
						width: 100rpx;
						height: 100rpx;
						background-color: cyan;
						margin-right: 200rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>
